/**
 * 课时介绍
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    FlatList,
    Dimensions,
    Platform,
    TouchableWithoutFeedback
} from 'react-native'

const { width } = Dimensions.get('window');
import { getCoursePartById, listParents } from '../api/my';
import {setSpText,srtWH, setHW} from './ScreenUtil'
export default class KnowledgeDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isRefreshing: false
        }
    }
    render() {
        return (
            <View style={styles.searchContainer}>
                <FlatList
                    data={this.props.dataList}
                    showsVerticalScrollIndicator={false}
                    renderItem={({ item }) => this.renderItem(item)}
                    extraData={this.state}
                    keyExtractor={(item) => item.COURSEPARTID}
                    refreshing={this.state.isRefreshing}
                />
            </View>
        );
    }
    goToLessons(item) {
        this.props.navigation.navigate('DetailLesson', { courseId: item.ID })
    }
    renderItem(item) {
        return (
            <TouchableWithoutFeedback onPress={() => this.goToPeriods(item)}>
            <View key={item.COURSEPARTID} style={styles.searchWrapper}>
                <View style={styles.fromLessonsContent}>
                    <View style={styles.fromLessons}>
                        <View style={styles.lessonImgs}>
                            <Image style={styles.imgs} source={{ uri: item.PIC }} />
                        </View>
                        <View style={styles.lessonRight}>
                            <Text style={styles.lessonName}>{this.MoreText(item.COURSEPARTNAME,10)}</Text>
                            <View style={styles.lessonTeacherWrapper}>
                                <Text style={styles.lessonTeacher}>授课老师：{this.MoreText(item.USERNAME,4)}</Text>
                            </View>
                            <View style={styles.knowageWrapper}>
                                <View style={styles.radius}><Text style={styles.knowageText}>{item.PERIODNAME}</Text></View>
                                <View style={styles.radius}><Text style={styles.knowageText}>{item.SUBJECTNAME}</Text></View>
                            </View>
                        </View>
                        {this.isFree(item)}
                    </View>
                </View>
                <View style={styles.lessonOrigin}>
                    <View>
                        <Text style={styles.orginText}>本课时来源于：{this.MoreText(item.COURSE_NAME,10)}</Text>
                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Text onPress={() => { this.goToLessons(item) }} style={styles.enterInLesson}>进入该系列课</Text>
                        <Image style={styles.enterLessonIcon} source={require('../assets/imgs/enter.png')} />
                    </View>
                </View>
            </View>
            </TouchableWithoutFeedback>
        )
    }
    // 是否免费
    isFree(item){
        if(item.IS_FREE == '0'){
            return(
                <View style={styles.priceWrapper}>
                    <Text style={styles.lessonPrefix}>¥</Text>
                    <Text style={styles.lessonPriceNumber}>{item.MONEY}</Text>
                </View>
            )
        }else{
            return(
                <View style={styles.priceWrapper}>
                    <Text style={styles.lessonPriceNumber}>免费</Text>
                </View>
            )
        }
    }
    //跳转 里面全部是课时
    goToPeriods(item) {
        this.props.navigation.navigate('KeShiIndex', { id: item.COURSEPARTID });
    }
    //内容超出
    MoreText(text,MaxNum){
        if(text){
            if(text.length>MaxNum){
                return(
                    text.substring(0,MaxNum)+'...'
                )
            }else{
                return(
                    text
                )
            }
        }
    }
}
const styles = StyleSheet.create({
    searchContainer: {
        flex: 1,
    },
    searchWrapper: {
        paddingBottom:0,
        marginBottom: setHW(10),
        backgroundColor: '#fff',
    },
    fromLessonsContent:{
        borderBottomWidth: 1,
        borderBottomColor: '#EBEBEB',
        padding: setHW(20),
        paddingBottom:0,
    },
    fromLessons: {
        flexDirection: 'row',
        paddingTop:setHW(10),
        paddingBottom:setHW(30),
    },
    lessonTeacherWrapper: {
        marginBottom: setHW(10),
    },
    // 授课老师：
    lessonTeacher:{
        fontSize:setSpText(26),
        color: '#333',
        marginTop: Platform.OS === "ios" ? setHW(18) : setHW(14),
        marginBottom: setHW(14),
    },
    lessonImgs: {
        width: setHW(240),
        marginRight: setHW(16),
    },
    imgs: {
        width: setHW(240),
        height: setHW(146),
        resizeMode: 'cover'
    },
    lessonName: {
        color: '#333',
        fontSize:setSpText(28),
        fontWeight: 'bold',
        marginTop:1,
    },
    priceWrapper: {
        position: 'absolute',
        top: setHW(4),
        right: setHW(4),
        flexDirection: 'row'
    },
    // 标签
    knowageWrapper: {
        flexDirection: 'row',
    },
    radius:{
        borderRadius: setHW(4),
        padding:setHW(6),
        marginRight: setHW(8),
        backgroundColor: '#F7F7F9',
    },
    knowageText: {
        color: '#999999',
        fontSize:setSpText(22),
    },
    lessonOrigin: {
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
        height:setHW(80),
        paddingLeft:setHW(20),
        paddingRight:setHW(20),
    },
    lessonPrefix: {
        color: '#FF8A00',
        fontSize:setSpText(22),
        paddingTop: setHW(6),
        // fontWeight: 'bold',
    },
    lessonPriceNumber: {
        fontSize:setSpText(28),
        color: '#FF8A00',
        fontWeight: 'bold'
    },
    // 来源
    orginText:{
        color: "#999",
        fontSize:setSpText(24),
    },
    enterInLesson:{
        color: '#666',
        textAlign: 'right',
        paddingRight: setHW(8),
        fontSize:setSpText(24),
    },
    enterLessonIcon: {
        width: setHW(14),
        height: setHW(20),
    }
});